<template>
    <div id="Lines" :style="{height:height}" :xAxisData="xAxisData" :seriesData="seriesData" :title="title">
    </div>
</template>

<script>
    import {on, off} from './tools'

    export default {
        name: "lines",
        props: {
            height: {
                type: String,
                default: "254px"
            },
            xAxisData: Array,
            seriesData: Array,
            title: String
        },
        data() {
            return {
                chart: null,
                option: {
                    color: ["#84bafd",
                        "#ffb980",
                        "#59678c",
                        "#9a7fd1",
                        "#97b552",
                        "#588dd5",
                        "#fb6260"],
                    title: {
                        text: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {},
                    toolbox: {
                        show: true,
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            name: 'Highest',
                            type: 'line',
                            data: [10, 11, 13, 11, 12, 12, 9],
                            markPoint: {
                                data: [
                                    {type: 'max', name: 'Max'},
                                    {type: 'min', name: 'Min'}
                                ]
                            },
                        },
                        {
                            name: 'Lowest',
                            type: 'line',
                            data: [1, 10, 11, 15, 3, 2, 0],
                            markPoint: {
                                data: [
                                    {type: 'max', name: 'Max'},
                                    {type: 'min', name: 'Min'}
                                ]
                            },
                        }
                    ]
                }
            }
        },
        beforeDestroy() {
            off(window, 'resize', this.resize)
        },
        methods: {
            resize() {
                this.chart.resize()
            },
            drawLine() {

                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('Lines'))
                this.chart = myChart;
                // 绘制图表
                this.option.xAxis.data = this.xAxisData;
                this.option.series = this.seriesData;
                this.option.title.text = this.title;
                myChart.setOption(this.option);
                on(window, 'resize', this.resize)
            },

        }
    }
</script>

<style scoped>

</style>